<template>
  <el-container>
    <el-header>
      <Title :title="titleName" :SecTitle="SecTitleName"></Title>
    </el-header>
    <el-main :style="styleMain">
      <el-row>
        <el-col>
          <el-form :inline="true" :model="form1">
            <el-form-item>
              <div class="block">
                <span class="demonstration">时间 </span>
                <el-date-picker
                  v-model="form1.time"
                  type="date"
                  placeholder="选择日期"
                  format="yyyy 年 MM 月 dd 日"
                  value-format="timestamp"
                >
                </el-date-picker>
              </div>
            </el-form-item>

            <el-form-item label="姓名" :style="styleMl_20">
              <el-input v-model="form1.name" placeholder="请输入姓名" >
              </el-input>
            </el-form-item>

            <el-form-item label="ID" :style="styleMl_20">
              <el-input v-model="form1.ID" placeholder="请输入ID" > </el-input>
            </el-form-item>
            <br>
            <el-form-item label="得分" >
              <el-input v-model="form1.score1" placeholder="分数" > </el-input>
            </el-form-item>
            <el-form-item label="至" >
              <el-input v-model="form1.score2" placeholder="分数" > </el-input>
            </el-form-item>

            <el-form-item label="表现" :style="styleMl_30">
              <el-select v-model="form1.performance" placeholder="请选择" >
                <el-option
                  v-for="item in performanceOptions"
                  :key="item.value"
                  :label="item.label"
                  :value="item.value"
                  :disabled="item.disabled"
                >
                </el-option>
              </el-select>
            </el-form-item>
            <el-form-item :style="styleMl_20">
              <el-button type="success" @click="search"> 筛选 </el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
        <!-- table -->
      <el-row>
        <el-col>
          <el-table :data="healthDatas" :cell-style="contorlScore">
            <el-table-column label="ID" prop="id"> </el-table-column>
            <el-table-column label="姓名" prop="name"> </el-table-column>
            <el-table-column label="性别" prop="sex">
              <template slot-scope="scope">
                  {{getSex(scope.row.sex)}}
              </template>
               </el-table-column>
            <el-table-column label="年龄" prop="age"> </el-table-column>
            <el-table-column label="健康得分" prop="healthScore"> </el-table-column>
            <el-table-column label="表现" prop="perform">
              <template slot-scope="scope">
                  {{getPerform(scope.row.perform)}}
              </template>
            </el-table-column>
            <el-table-column label="最后更新时间" prop="lastUpdateTime" width="200%">
              <template slot-scope="scope">
                  {{goTime(scope.row.lastUpdateTime)}}
                </template>
            </el-table-column>
            <el-table-column label="操作" width="200%">
            <template slot-scope="scope">
                <el-button type="text" @click="dialogTableVisible = true;handleClick(scope.row)">查看</el-button>
                <el-button type="text" @click="dialogFormVisible = true;edit(scope.row)">编辑</el-button>
            </template>
            </el-table-column>
          </el-table>
          <!-- 查看弹出框 -->
            <el-dialog title="查看" :visible.sync="dialogTableVisible" center>
                <el-table :data="viewData">
                    <el-table-column  property="id" label="ID"></el-table-column>
                    <el-table-column  property="name" label="姓名"></el-table-column>
                    <el-table-column  property="sex" label="性别"></el-table-column>
                    <el-table-column  property="age" label="年龄"></el-table-column>
                </el-table>
                <template>
                    <el-container>
                        <el-aside width="220px" style="text-align:center">
                            <el-row >
                                <el-col style="margin-top:15px">健康得分</el-col>
                                <el-col id="view-score" :style="changeColor(this.viewData[0].healthScore)">{{this.viewData[0].healthScore}}</el-col>
                                <el-col id="view-status" :style="changeColor(this.viewData[0].status)">{{this.viewData[0].status}}</el-col>
                                <el-col style="margin-top:50px">健康报告</el-col>
                            </el-row>
                        </el-aside>
                        <el-container>
                            <el-main>
                            <el-row class="viewMain">
                                <el-col :span="6">心率(次)</el-col>
                                <el-col :span="6">{{this.viewData[0].rate}}</el-col>
                                <el-col :span="6">血糖(mmol)</el-col>
                                <el-col :span="6">{{this.viewData[0].bloodSugar}}</el-col>
                            </el-row>
                             <el-row class="viewMain">
                                <el-col :span="6">血氧(%)</el-col>
                                <el-col :span="6">{{this.viewData[0].bloodOxygen}}</el-col>
                                <el-col :span="6">血脂(mmol)</el-col>
                                <el-col :span="6">{{this.viewData[0].bloodFat}}</el-col>
                            </el-row>
                               <el-row class="viewMain">
                                <el-col :span="6">血压(mmHg)</el-col>
                                <el-col :span="6">{{this.viewData[0].bloodPressure}}</el-col>
                                <el-col :span="6">膳食(cal)</el-col>
                                <el-col :span="6">{{this.viewData[0].diet}}</el-col>
                            </el-row>
                            </el-main>
                            <el-footer>
                                    <div>
                                        改进膳食结构，均衡营养;摒弃不良生活习惯,戒烟限酒;合理安排生活工作,劳逸结合;
                                        制定定期疗养计划,避免长期超负荷工作;乐观向上，积极应对生活和工作压力;
                                    </div>
                            </el-footer>
                        </el-container>
                    </el-container>
                </template>

                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogTableVisible = false">返回</el-button>
                </div>
            </el-dialog>
            <!-- 编辑弹出框 -->
           <el-dialog title="编辑数据" :visible.sync="dialogFormVisible" center>

                    <el-form :inline="true" :model="form" ref="form" :rules="rules">

                        <el-form-item label="心率(次):" style="width: 48%;" prop="heartRate">
                            <br>
                        <el-input v-model="form.heartRate" placeholder="请输入心率" style="width: 120%;margin-left: -32%;"
                        ></el-input>
                        </el-form-item>

                       <el-form-item label="血压(mmHg):" style="width: 48%;margin-left: 1%" prop="bloodPressure1">
                        <el-input v-model="form.bloodPressure1" placeholder="请输入低压" style="width: 40%;" prop="bloodPressure1"></el-input>
                        /<el-input v-model="form.bloodPressure2" placeholder="请输入高压" style="width: 40%;" prop="bloodPressure2"></el-input>
                        </el-form-item>

                        <el-form-item label="血糖(mmol):" style="width: 48%;" prop="bloodSugar">
                            <br>
                        <el-input v-model="form.bloodSugar" placeholder="请输入血糖" style="width: 120%;margin-left: -44%;"></el-input>
                        </el-form-item>

                        <el-form-item label="血氧(%):" style="width: 48%;" prop="bloodOxygen">
                            <br>
                        <el-input v-model="form.bloodOxygen" placeholder="请输入血氧"  style="width: 120%;margin-left: -32%;"></el-input>
                        </el-form-item>

                        <el-form-item label="血脂(mmol):" style="width: 48%;" prop="bloodFat">
                            <br>
                        <el-input v-model="form.bloodFat" placeholder="请输入血脂" style="width: 120%;margin-left: -44%;"></el-input>
                        </el-form-item>
                        <el-form-item label="膳食(cal):" style="width: 48%;" prop="diet">
                            <br>
                        <el-input v-model="form.diet" placeholder="请输入膳食" style="width: 120%;margin-left: -35%;"></el-input>
                        </el-form-item>
                    </el-form>
                <div slot="footer" class="dialog-footer">
                    <el-button @click="dialogFormVisible = false">取 消</el-button>
                    <el-button type="primary" @click="save('form')">确 定</el-button>
                </div>
                </el-dialog>
        </el-col>
      </el-row>
    </el-main>
    <el-footer :style="styleMain">
        <Paging
        @pagesizeChange="getPagesize"
        @currentPageChange="getCurrentPage"
        :total="total"
        :pagesize="pagesize"
        :currentPage="currentPage"
        ></Paging>    
    </el-footer>
  </el-container>
</template>

<script>
import Title from "../../components/common/title.vue";
import Paging from "../../components/paging/paging.vue";
export default {
  data: function () {
    return {
      //标题
      titleName:'健康管理',
      SecTitleName:'健康数据',
      //主体
      styleMain:{
        padding:"20px 0px",
      },
      styleMl_20:{
        marginLeft:'20px',
      },
      styleMl_30:{
        marginLeft:'30px',
      },
      styleAddBtn:{
        float:"right",
        zIndex:"3",
        marginBottom:"20px",
      },
      //分页
      total:5,
      pagesize: 4,
      currentPage:1,
      dialogTableVisible: false,
      dialogFormVisible: false,
      editID:0,
      //表单验证
      form: {
          name: "",
          sex: "",
          age: "",
          healthScore : "",
          perform :'',
          heartRate: '',
          bloodPressure1: '',
          bloodPressure2: '',
          // bloodPressure:'',
          bloodSugar: '',
          bloodOxygen: '',
          bloodFat: '',
          diet:'',
      },
      rules:{
        heartRate:[
          {required:true,message:'请输入心率',trigger: 'blur'},
          {min:1,max:3,message:'长度在 1 到 3个字符',trigger: 'blur'}
        ],
        bloodPressure1:[
          {required:true,message:'请输入血压',trigger: 'blur'},
          {min:1,max:3,message:'长度在 1 到 3 个字符',trigger: 'blur'}
        ],
        bloodPressure2:[
          {required:true,message:'请输入血压',trigger: 'blur'},
          {min:1,max:3,message:'长度在 1 到 3 个字符',trigger: 'blur'}
        ],
         bloodSugar:[
          {required:true,message:'请输入血糖',trigger: 'blur'},
          {min:1,max:3,message:'长度在 1 到 3 个字符',trigger: 'blur'}
        ], 
         bloodOxygen:[
          {required:true,message:'请输入血氧',trigger: 'blur'},
          {min:1,max:3,message:'长度在 1 到 3 个字符',trigger: 'blur'}
        ], 
        bloodFat:[
          {required:true,message:'请输入血脂',trigger: 'blur'},
          {min:1,max:3,message:'长度在 1 到 3 个字符',trigger: 'blur'}
        ],
         diet:[
          {required:true,message:'请输入膳食',trigger: 'blur'},
        ],
      },
      // 筛选
      form1: {
        time: "",
        name: "",
        ID: '',
        score1: "",
        score2: "",
        performance: "",
      },
      performanceOptions: [
        {
          value: "0",
          label: "优秀",
        },
        {
          value: "1",
          label: "良好",
        },
        {
          value: "2",
          label: "差",
        },
      ],
      healthDatas: [
        {
          id:0,
          name: '',
          sex:'',
          age:'',
          healthScore:'',
          perform:'',
          lastUpdateTime:'',
          bloodFat: '',
          bloodOxygen: '',
          bloodPressure: '',
          bloodSugar: '',
          diet: '',
          healthDataId: '',
          healthScore: '',
          lastUpdateTime: '',
          rate: '',
          status: '',
        },
       
      ],
      // 查看页面数据
      viewData: [
        {
          id:'',
          name: '',
          sex:'',
          age:'',
          healthScore:'',
          status: '',
          perform:'',
          lastUpdateTime:'',
          bloodFat: '',
          bloodOxygen: '',
          bloodPressure: '',
          bloodSugar: '',
          diet: '',
          healthDataId: '',
          healthScore: '',
          lastUpdateTime: '',
          rate: '',
        },
      ],
      //编辑弹出框
      sexOptions:[
        {
          value: "0",
          label: "男",
        },
        {
          value: "1",
          label: "女",
        },
      ],
      //优化样式
      styleMain:{
        padding:"20px 0px",
      },
    };
  },
  components: {
    Title,
    Paging,
  },
  created(){
    //页面更新
    this.update()
  },
  methods: {
    //页面更新
    update(){
      //页面更新访问后台获取table数据
    this.axios.post("/healthData/list",{
      page: this.currentPage,
      pageSize: this.pagesize
    },)
    .then((res)=>{
      // console.log(res.data.data)
      this.healthDatas=res.data.data
      this.total=res.data.count
                  
    })
    .catch((err)=>{
      console.log('页面更新访问后台获取table数据',err)
    })
    },
    // 筛选
    search() {
      // console.log(this.form1)
      this.axios.post("/healthData/list",
        {
        lastUpdateTime:this.form1.time,
        name: this.form1.name,
        sHealthScore: this.form1.score1,
        dHealthScore: this.form1.score2,
        perform: this.form1.performance,
        page: this.currentPage,
        pageSize: this.pagesize,
        },
      )
      .then((res)=>{
        // console.log(res.data.data)
        this.total=res.data.count        
        this.healthDatas=[]
        this.healthDatas=res.data.data
        this.currentPage=1;
      })
      .catch((err)=>{
        console.log(err)
      })
    },
    contorlScore(row, column, rowIndex, columnIndex) {
      //   console.log(row)
    //   console.log(row.row.T_age);
      if (row.row.T_score < 60 && row.column.label === "健康得分") {
        return "color:red";
      }
      if (row.row.T_score < 80 && row.column.label === "健康得分") {
        return "color:orange";
      }
      if (row.row.T_score <= 100 && row.column.label === "健康得分") {
        return "color:green";
      }
      if (row.row.T_performance == "优秀" && row.column.label === "表现") {
        return "color:green";
      }
      if (row.row.T_performance == "良好" && row.column.label === "表现") {
        return "color:orange";
      }
      if (row.row.T_performance == "差" && row.column.label === "表现") {
        return "color:red";
      }
    },
    // 查看
    handleClick(row) {
        // console.log(row.id);
        this.axios({
          methods:'get',
          url:'/healthData/'+row.id,
          
        })
        .then((res)=>{
          // console.log(res.data.data)
          this.viewData=[];
          this.viewData.push(res.data.data)
          
        })
        .catch((err)=>{
          console.log('/healthData',err)
        })
      },
    changeColor(value){
        if(value<60){
          return "color:red"
        }
        if(value<80){
          return "color:orange"
        }
        if(value<=100){
          return "color:green"
        }
      },
    // 编辑
    edit(row){
        this.editID=row.id
    },
    save(fromName){
    //  console.log(this.editID)
    this.$refs[fromName].validate((valid)=>{
      console.log(valid)
      if(valid){
      let bloodPressureData=this.form.bloodPressure1+'/'+this.form.bloodPressure2
    //  console.log(bloodPressureData)
      this.axios.post('/healthData/update',
      {
          id:this.editID,
          name:this.name,
          sex:this.sex,
          age:this.age,
          healthScore:this.healthScore,
          perform:this.perform,
          bloodFat: this.form.bloodFat,
          bloodOxygen: this.form.bloodOxygen,
          bloodPressure:bloodPressureData,
          bloodSugar: this.form.bloodSugar,
          diet: this.form.diet,
          rate: this.form.heartRate,
        },
        )
      .then((res)=>{
        console.log(res)
        this.$message({
          type:"success",duration:500,message:res.data.msg,
        })
        this.form={
          heartRate: '',
          bloodPressure1: '',
          bloodPressure2: '',
          // bloodPressure:'',
          bloodSugar: '',
          bloodOxygen: '',
          bloodFat: '',
          diet:'',
        }
      })
      .catch((err)=>{
        console.log(err)
      })
      }
    })
    },
    //时间格式化
    goTime(val) {
      var timestamp4 = new Date(val);
      //利用拼接正则等手段转化为yyyy-MM-dd hh:mm:ss 格式
      return timestamp4.toLocaleDateString().replace(/\//g, "-") + " " + timestamp4.toTimeString().substr(0, 8); 
    },
    getPerform(value){
        if(value==0){
          return '优秀'
        }else if(value==1){
          return '良好'
        }else {
          return '差'
        }
      },
      getSex(value){
        if(value==0){
          return '男'
        }else {
          return '女'
        }
      },
    //子组件传入pagesize 分页
    getPagesize(val) {
      this.pagesize = val;
      //更新页面
          this.update();
    },
    //子组件传入CurrentPage
    getCurrentPage(val) {
      this.currentPage = val;
      //更新页面
          this.update();
    },

  },
};
</script>

<style lang="less" scoped>
#view-score{
  font-size:40px;margin-top:10px;
}
#view-status{
  margin-top:10px;
}
</style>